<template>
	<view class="bar_box">
		<view class="tab_bar">
			<view class="tab_bar_item" v-for="(item, index) in tabList" :key="index" @tap="selectTab(index, item.url)">
				<image style="width: 25px; height: 25px;" :src="index == indexActive ? item.imgPL : item.imgUN" />
				<view class="tip_name" :style="{color: index == indexActive ? '#D82728' : '#333'}">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		indexActive: {
			type: String,
			default() {
				return '0';
			}
		},
		tabList: {
			type: Array,
			default(){
				return []
			}
		}
	},
	methods: {
		selectTab(index, url) {
			let _this = this
			uni.reLaunch({
				url: url
			})
		}
	}
};
</script>

<style scoped>
.bar_box {
	width: 100%;
	height: 75px;
}
.tab_bar {
	border-top: solid 3px #f1f1f1;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px 60px;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
}

.tab_bar_item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.tab_bar_item .tip_name {
	font-size: 13px;
}
</style>
